import { fileURLToPath, URL } from 'node:url';

import { defineConfig, loadEnv, mergeConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';

// export default defineConfig({
//   plugins: [vue(), vueJsx()],
//   resolve: {
//     alias: {
//       '@': fileURLToPath(new URL('./src', import.meta.url)),
//     },
//   },
// });

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const env = loadEnv(mode, process.cwd(), '');
  // console.log("env", command, env, env.NODE_ENV, env.APP_ENV, process.env);

  let config = {};
  if (command === 'serve') {
    // dev 独有配置
    config = {
      mode: 'development',
      server: {
        host: '0.0.0.0', // default: "localhost"
        port: 1024, // default: 5173
        proxy: {
          '/api': {
            target: 'http://jsonplaceholder.typicode.com',
            changeOrigin: true,
            rewrite: (path: string) => path.replace(/^\/api/, ''),
          },
          // Proxying websockets or socket.io
          '/socket.io': {
            target: 'ws://localhost:3000',
            ws: true,
          },
        },
      },
    };
  } else {
    // command === 'build'
    // build 独有配置
    config = {
      mode: 'production',
      build: {
        target: 'modules',
        outDir: 'dist', // 指定输出路径（相对于 项目根目录)
        assetsDir: 'assets', // 指定生成静态资源的存放路径(相对于 build.outDir)
        assetsInlineLimit: 4096, // 单位(byte,4096=4kb),小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项
        /*
          构建后是否生成 source map 文件。如果为 true，将会创建一个独立的 source map 文件。
          如果为 'inline'，source map 将作为一个 data URI 附加在输出文件中。
          'hidden' 的工作原理与 'true' 相似，只是 bundle 文件中相应的注释将不被保留
        */
        sourcemap: true, // boolean | 'inline' | 'hidden'
        /*
          当设置为 true，构建后将会生成 manifest.json 文件，包含了没有被 hash 过的资源文件名和 hash 后版本的映射。
          可以为一些服务器框架渲染时提供正确的资源引入链接。当该值为一个字符串时，它将作为 manifest 文件的名字。
        */
        manifest: false,
      },
    };
  }
  return mergeConfig(
    {
      root: process.cwd(),
      base: './', // 开发或生产环境服务的公共基础路径。合法的值包括以下几种 1)绝对 URL 路径名，例如 /foo/ 2)完整的 URL，例如 https://foo.com/ 3)空字符串或 ./（用于嵌入形式的开发）
      publicDir: 'public', // default: 'public', 作为静态资源服务的文件夹,该目录中的文件在开发期间在 / 处提供，并在构建期间复制到 outDir 的根目录
      // 定义全局常量替换方式。其中每项在开发环境下会被定义在全局，而在构建时被静态替换
      define: {
        /*
          NOTE:
          对于使用 TypeScript 的开发者来说，请确保在 env.d.ts 或 vite-env.d.ts 文件中添加类型声明，以获得类型检查以及代码提示。
          // vite-env.d.ts
          declare const __APP_ENV__: string
        */
        // __APP_ENV__: env.APP_ENV,
        __APP_ENV__: process.env.NODE_ENV,
      },
      plugins: [vue(), vueJsx()],
      resolve: {
        alias: {
          '@': fileURLToPath(new URL('./src', import.meta.url)),
        },
      },
      /* yarn add -D less scss postcss postcss-preset-env
        对于 css 相关的处理（不管是 css 还是 less、scss 还是 postcss），我们没有编写任何关于 Vite 的配置，因为 Vite 已经帮我们将这些配置都内置了
        Vite 的执行效率是比 Webpack 高很多
        NOTE:
        postcss配置
        1)配置postcss.config.js 文件即可,
          module.exports = {
            plugins: [
              require('postcss-preset-env')
            ]
          }
        2)或在css.postcss.plugins中配置
      */
      css: {
        devSourcemap: false,
        /*
        interface CSSModulesOptions {
          scopeBehaviour?: 'global' | 'local'
          globalModulePaths?: RegExp[]
          generateScopedName?: | string | ((name: string, filename: string, css: string) => string)
          hashPrefix?: string
          // 默认：null
          localsConvention?: | 'camelCase' | 'camelCaseOnly' | 'dashes' | 'dashesOnly' | null
        }
        */
        modules: {},
        // string | (postcss.ProcessOptions & { plugins?: postcss.AcceptedPlugin[] })
        postcss: {
          plugins: [require('postcss-preset-env')],
        },
      },
    },
    config
  );
});
